<template>
<div>
    <span>姓名:{{name}}</span>
    <span>年龄:{{age}}</span>
    <span>薪资:{{job.salary}}K</span>
    <button @click="age++">年龄++</button>
    <button @click="showPerson">输出最原始的person</button>
    <span v-show="person.car">车的名字:{{person.car}},车的价格:{{person.car}}</span>
    <button @click="addCar">添加一辆车</button>
    <button @click="person.car.price++">换价格</button>
    </div>
</template>

<script>

//shallowReactive 只处理对象的第一层结构，shallowRef只处理基本数据类型
//readonly shallowReadonly(只改变第一层结构) 将响应式对象变为只读的 
//toRaw(ref数据不行) 和 markRaw 将响应式的对象变化为普通对象
import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef,readonly,shallowReadonly, toRaw, markRaw} from 'vue';
   export default {
        name:  '',
        components: {},
        setup(){
            let sum = ref(0);
            let person  =reactive({
                name:"ltk",
                age: 18,
               job:{
                salary:20
               }}) 
            //person = readonly(person);
            function showPerson(){
                // const p = toRaw(person);
                // console.log('原始person',p);
                 const p = toRaw(sum);
                 console.log('pp',p);
                 
            }
            function addCar(){
                const car = {name:'奔驰',price:20}
                person.car = markRaw(car);
            }
            return {
               // name: toRef(person,'name')
               person,
               ...toRefs(person),
               showPerson,
               addCar
            }
        }
   }
</script>

<style scoped>

</style>